import React, {useEffect, useState} from 'react'
import './index.scss'
import {Input, Select, Menu, Button, Image, message} from 'antd';
import Axios from "../../../utils/Axios";
import {provinceData, cityData} from '../../../utils/citys'
import {useUserInfo, createAction} from "../../../hooks/useUserInfo";
import ReactFileReader from "react-file-reader";

const {TextArea} = Input;
const {Option} = Select;

export default function Setting() {
  const handleClick = e => {
    console.log('click ', e);
  }
  return (
    <div className="setting">
      <div className="setting-box">
        <Menu
          onClick={handleClick}
          style={{width: 256}}
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          className="setting-menu"
        >
          <Menu.Item key="1">基本设置</Menu.Item>
        </Menu>
        <div className="setting-content">
          <BaseInfo/>
        </div>
      </div>
    </div>
  )
}

function BaseInfo(props) {
  const [base64, setBase64] = useState('')
  const [cities, setCities] = React.useState(cityData[provinceData[0]]);
  const {userInfo, userInfoDispatch} = useUserInfo()
  const [load, setLoad] = useState(0)
  const handleProvinceChange = value => {
    setCities(cityData[value]);
    userInfoDispatch(createAction('PROVINCE', value))
  };
  const onSecondCityChange = value => {
    userInfoDispatch(createAction('CITY', value))
  };
  const putUserInfo = () => {
    Axios.put(`/user/user/${userInfo.name}/${userInfo.nickname}/${userInfo.introduction}/${userInfo.phone}/${userInfo.email}/${userInfo.province}/${userInfo.city}`)
      .then(res => {
        if (res.data.code === 200) {
          message.success(res.data.msg, 1)
          setLoad(load => load + 1)
        } else
          message.error(res.data.msg, 2)
      })
    const params = new URLSearchParams()
    params.append('image', base64)
    Axios.put(`/user/userImage`, params)
      .then(res => {
        console.log(res.data)
      })
  }

  useEffect(() => {
    Axios.get('/user/user')
      .then(res => {
        const data = res.data.data
        if (res.data.code === 200) {
          userInfoDispatch(createAction('EMAIL', data.email))
          userInfoDispatch(createAction('NAME', data.name))
          userInfoDispatch(createAction('NICKNAME', data.nickname))
          userInfoDispatch(createAction('PHONE', data.phone))
          userInfoDispatch(createAction('INTRODUCTION', data.introduction))
          userInfoDispatch(createAction('PROVINCE', data.province))
          userInfoDispatch(createAction('CITY', data.city))
        }
      })
  }, [load, userInfoDispatch])

  return (
    <div className="base-info">

      <div className="info-box">
        <h2>基本信息</h2>
        <div>
          <span>邮箱</span><Input placeholder="邮箱" value={userInfo.email}
                                onChange={e => userInfoDispatch(createAction('EMAIL', e.target.value))}/>
        </div>
        <div>
          <span>昵称</span><Input placeholder="昵称" value={userInfo.nickname}
                                onChange={e => userInfoDispatch(createAction('NICKNAME', e.target.value))}/>
        </div>
        <div>
          <span>真实姓名</span>
          <Input placeholder="真实姓名" value={userInfo.name}
                 onChange={e => userInfoDispatch(createAction('NAME', e.target.value))}/>
        </div>
        <div>
          <span>个人简介</span>
          <TextArea rows={4}
                    style={{resize: "none"}}
                    placeholder="个人简介"
                    value={userInfo.introduction}
                    onChange={e => userInfoDispatch(createAction('INTRODUCTION', e.target.value))}
          />
        </div>

        <div>
          <span>所在省市</span>
          <div>
            <Select defaultValue={userInfo.province} value={userInfo.province} style={{width: 140, marginRight: 20}}
                    onChange={handleProvinceChange}>
              {provinceData.map(province => (
                <Option key={province}>{province}</Option>
              ))}
            </Select>
            <Select style={{width: 140}} value={userInfo.city} onChange={onSecondCityChange}>
              {cities.map(city => (
                <Option key={city}>{city}</Option>
              ))}
            </Select>
          </div>

        </div>
        <div>
          <span>联系电话</span>
          <Input placeholder="联系电话" size="larger" value={userInfo.phone}
                 onChange={(e) => userInfoDispatch(createAction('PHONE', e.target.value))}/>
        </div>
        <div>
          <Button style={{width: 160}} type="primary" size="larger" onClick={putUserInfo}>更新信息</Button>
        </div>
      </div>

      <div className="img-upload">
        <Image
          className="img-box"
          width={200}
          height={200}
          src={base64}
          fallback=""
        />
        <ReactFileReader
          fileTypes={[".png", ".jpg", ".gif", "jpeg"]}
          base64
          multipleFiles={!1}
          handleFiles={(files) => {
            setBase64(files.base64)
          }}
        >
          <Button>选择图片</Button>
        </ReactFileReader>
        <span className="ps">注：该图片应选择本人正面清晰的免冠照片</span>
      </div>

    </div>
  )
}